<template>
  <div>
    <div>
      <span class="fs-base">总计</span>
      <el-text class="ml10 fs-large" type="success">550.00元</el-text>
    </div>
    <div v-loading="loading" class="mt20">
      <template v-if="list.length > 0">
        <div class="primary-section pv-12 ph-16" v-for="item in list" :key="item.id">
          <el-row align="middle">
            <el-col :span="16">
              <span class="font-w">{{ item.payerName }}（{{ item.recordType }}）</span>
            </el-col>
            <el-col :span="8" align="right">
              <span class="font-w">{{ item.amount }}元</span>
            </el-col>
          </el-row>
          <div class="mt5 fc-regular">{{ item.createDate }}</div>
        </div>
      </template>
      <el-empty v-else description="暂无记录" />
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      layout="prev, pager, next,"
      @pagination="getList"
    />
  </div>
</template>
<script setup name="CheckInRecord">

const list = ref([])
const loading = ref(false)
const total = ref(0)
const lodgingDetailVisible = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  }
})

const { queryParams } = toRefs(data)

/* 获取列表 */
function getList() {
  loading.value = true
  setTimeout(() => {
    list.value = [{
      id: 1,
      payerName: '电费充值',
      recordType: '线上',
      createDate: '2024.04.01',
      amount: '50.00'
    }, {
      id: 2,
      payerName: '电费充值',
      recordType: '线上',
      createDate: '2024.04.01',
      amount: '100.00'
    }]
    total.value = 2
    loading.value = false
  }, 500);
}

getList()
</script>